<template>
	<view class="sy" @click.stop="audioPlay()">
		<view class="title">
			<image class="title-image" src="../../static/images/title.png" mode="widthFix"></image>
		</view>
		<image src="../../static/images/startgif.gif" mode="widthFix" class="fox"></image>
		<image src="../../static/images/botton.gif" mode="widthFix" @click.stop="startBtn()" class="startBtn"></image>
	</view>
</template>

<script>
	let innerAudioContexts = uni.createInnerAudioContext();
	import {
		sort_ascii,
		getMD5Screct
	} from "../../static/js/utils"
	export default {
		data() {
			return {
				animationlist: [],
				animationUrl: '',
				content: '主人，欢迎使用反问猫，喵喵喵',
			};
		},
		onLoad() {
			this.getAnimationlist();
		},
		
		methods: {
			// 获取动画列表
			getAnimationlist() {
				let data = {
					appKey: this.appkey,
					appSecret: this.appSecret,
					uid: this.uid.toString(),
				}
				let sign = sort_ascii(data);
				sign = getMD5Screct(sign);
				data.signature = sign;
				uni.request({
					method: "POST",
					url: `${this.baseUrl}/api/ai/animationlist`,
					data: data,
					success: (res) => {
						const {
							data
						} = res.data;
						this.animationlist = data;
						this.animationUrl = data[0].image;
					},
					fail: (err) => {
						console.log('请求失败_______________', err)
					}
				})
			
			},
			startBtn() {
				uni.navigateTo({
					url: "/pages/index/ask"
				})
			},
			audioPlay() {
				let data = {
					appKey: this.appkey,
					appSecret: this.appSecret,
					msg: this.content,
					deviceId: this.deviceId,
				}
				let sign = sort_ascii(data);
				sign = getMD5Screct(sign);
				data.signature = sign;
				uni.request({
					url: `${this.baseUrl}/api/ai/texttovoice`,
					method: "POST",
					data: data,
					success: (res) => {
						const url = res.data.data.url[0]
						innerAudioContexts.autoplay = true;
						innerAudioContexts.loop = false;
						innerAudioContexts.src = url;
						innerAudioContexts.play();
					},
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.sy {
		height: 100vh;
		background-image: url("../../static/images/bg.png");
		background-size: 100% 100%;
		position: relative;

		.fox {
			width: 50%;
			position: absolute;
			left: 25%;
			bottom: 22%;
			height: auto;
		}

		.startBtn {
			width: 50%;
			left: 25%;
			bottom: 10%;
			position: absolute;
		}

		.title {
			color: #fff;
			text-align: center;
			position: absolute;
			top: 15%;
			left: 0;
			right: 0;

			.title-image {}
		}
	}
</style>
